<template>
  <el-button @click="handleFull">全屏展示</el-button>
  <FormHeader
    :formList="formList"
    :inline="true"
    :rules="rules"
    buttonText="检索"
    @handleSubmit="handleSubmit"
  ></FormHeader>
  <Table
    :listData="listData"
    :tableData="tableData"
    :selectedIds="selectedIds"
    :showSelect="showSelect"
  >
  </Table>
</template>
<script setup>
import { onMounted, ref } from "vue";
import FormHeader from "./formItemdom.vue";
import Table from "./table.vue";
const showSelect = ref(true);
const selectedIds = ref([1]); //选择的id数组
const listData = ref([
  { prop: "date", label: "日期" },
  { prop: "name", label: "姓名" },
  { prop: "address", label: "地址", width: 400 },
]);
const rules = ref({
  nameinput: [
    { required: true, message: "请输入输入框名称", trigger: "blur" },
    {
      min: 3,
      max: 5,
      message: "长度在 3 到 5 个字符",
      trigger: "blur",
    },
  ],
});
const formList = [
  {
    name: "nameinput",
    label: "输入框",
    formType: "input",
    defaultValue: "",
    placeholder: "",
  },
  {
    name: "inputNumber",
    label: "数字输入框",
    formType: "inputNumber",
    defaultValue: "",
    placeholder: "",
  },
  {
    //单选--options为key，value(可利用optionMap进行字段映射)
    name: "2222",
    label: "单选框",
    formType: "radio",
    defaultValue: "",
    placeholder: "",
    options: [
      { key: 1, name: "1111" },
      { key: 2, name: "222" },
    ],
    optionMap: { key: "", value: "name" },
  },
  {
    //多选--options为key，value(可利用optionMap进行字段映射)
    name: "checkbox",
    label: "多选框",
    formType: "checkbox",
    defaultValue: "",
    placeholder: "",
    options: [
      { key: 1, name: "1111" },
      { key: 2, name: "222" },
    ],
    optionMap: { key: "", value: "name" },
  },
  {
    //select--options为key，value(可利用optionMap进行字段映射)
    name: "select",
    label: "select选择",
    formType: "select",
    defaultValue: "",
    placeholder: "",
    options: [
      { key: 1, name: "1111" },
      { key: 2, name: "222" },
    ],
    optionMap: { key: "", value: "name" },
  },
  {
    //开关
    name: "switch",
    label: "开关",
    formType: "switch",
    defaultValue: "",
  },
  {
    //时间选择器
    name: "timePicker",
    label: "时间选择",
    formType: "timePicker",
    defaultValue: "",
    isRange: false,
  },
  {
    //日期选择器
    name: "DataPicker",
    label: "日期",
    formType: "DataPicker",
    defaultValue: "",
    isRange: true,
    type: "day", //day,week,daterange等
  },
];
const handleSubmit = (form) => {
  console.log(form);
};
</script>

<style lang="scss">
.el-table {
  // width: calc(100% - 60px);
}
</style>
